<template>
  <div class="my-custiom">
    <div class="my-custiom-content">
      <div class="my-custiom-title">
        借阅记录
      </div>
      <div class="my-custiom-content-text" ref="scrollContainer">
        <div v-for="item in reception" :key="item.value" class="my-custiom-content-text-item">
          <div>{{ item.name }}</div>
          <div>{{ item.time }}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
// 定义组件
import { Component, Vue, Prop } from 'vue-property-decorator';
import Api from '../../api/api';
@Component
export default class TestPage extends Vue {
  @Prop({ type: String, default: '' })
  userId!: string;

  @Prop({ type: Array || null, default: null })
  roleIds!: any[] | null;

  @Prop({ type: Array || null, default: null })
  roleName!: any[] | null;

  @Prop({ type: String, default: '' })
  phone!: string;

  @Prop({ type: String, default: '' })
  email!: string;

  @Prop({ type: String, default: '' })
  deptName!: string;

  @Prop({ type: String, default: '' })
  deptId!: string;

  reception: any = [
    {
      value: 0,
      name: '借阅了25年档案信息',
      time: '2023-07-01'
    },
    {
      value: 1,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    },
    {
      value: 2,
      name: '借阅了265年档案信息',
      time: '2023-07-04'
    },
    {
      value: 3,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    }, {
      value: 4,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    }, {
      value: 5,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    }, {
      value: 6,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    }, {
      value: 7,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    }, {
      value: 8,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    },
    {
      value: 9,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    },
    {
      value: 10,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    },
    {
      value: 11,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    },
    {
      value: 12,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    },
    {
      value: 13,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    },
    {
      value: 14,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    },
    {
      value: 15,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    },
    {
      value: 16,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    },
    {
      value: 17,
      name: '阅了225年档案信息',
      time: '2023-07-03'
    },

  ]  //接收情况统计
  replayToken: any = ''

  created() {
    this.fetchReplayToken();
    
  }

  async fetchReplayToken() {
    this.replayToken = await Api.exportReplayToken()
    // console.log('this.replayToken', this.replayToken);

  }

}








</script>

<style lang="less" scoped>
.my-custiom {
  height: 100%;
  width: 100%;


}

.my-custiom-content {
  padding: 20px;
  height: 100%;
  position: relative;
  background-color: #fff;
}

.my-custiom-title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 16px;
  color: black;
  position: relative;
  /* 确保伪元素相对于该容器定位 */

}

.my-custiom-content-text {
  font-size: 15px;
  color: black;
  padding: 5px;

  max-height: 300px; /* 确保高度足够 */
  overflow-y: auto;



}

.my-custiom-content-text-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>